<template>
    <div>
        <van-nav-bar title="商城首页" />
        <van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>

        <van-tabs v-model:active="active" animated>
            <van-tab title="标签 1">
                <swipe></swipe>

                <div class="seckill" v-show="seckillStatus">
                    <div class="seckillTime">
                        <span>2025</span>
                        <span>07</span>
                        <span>21</span>
                        <span>15</span>
                        <span>02</span>
                        <span>{{ seckillTime }}</span>
                    </div>
                    </div>
                <van-skeleton title :row="3" v-if="status" />
                <van-grid v-else>
                    <van-grid-item v-for="item in catitems" :icon="item.image_src" :text="item.name" />
                    <van-grid-item v-for="item in catitems" :icon="item.image_src" :text="item.name" />
                </van-grid>
                <br>
                <!-- 倒计时 -->
                
                    <!-- 瀑布流 -->
                    <div class="pbl">
                        <div style="width: 100%;height: 200px;background: skyblue;"><img
                                style="width: 100%;height: 200px;" src="../img/22f0b13b3d5050532c885299aeb14a89.webp"
                                alt=""><span>$857.00</span></div>
                        <div style="width: 100%;height: 150px;background: skyblue;"><img
                                style="width: 100%;height: 150px;" src="../img/22f0b13b3d5050532c885299aeb14a89.webp"
                                alt=""><span>$857.00</span></div>
                        <div style="width: 100%;height: 250px;background: skyblue;"><img
                                style="width: 100%;height: 250px;" src="../img/22f0b13b3d5050532c885299aeb14a89.webp"
                                alt=""><span>$857.00</span></div>
                        <div style="width: 100%;height: 100px;background: skyblue;"><img
                                style="width: 100%;height: 140px;" src="../img/22f0b13b3d5050532c885299aeb14a89.webp"
                                alt=""><span>$857.00</span></div>
                        <div style="width: 100%;height: 205px;background: skyblue;"><img
                                style="width: 100%;height: 205px;" src="../img/22f0b13b3d5050532c885299aeb14a89.webp"
                                alt=""><span>$857.00</span></div>
                        <div style="width: 100%;height: 180px;background: skyblue;"><img
                                style="width: 100%;height: 180px;" src="../img/22f0b13b3d5050532c885299aeb14a89.webp"
                                alt=""><span>$857.00</span></div>
                    </div>
            </van-tab>
            <van-tab title="标签 2">内容 2</van-tab>
            <van-tab title="标签 3">内容 3</van-tab>
            <van-tab title="标签 4">内容 4</van-tab>
        </van-tabs>

    </div>
</template>

<script setup>
import { catitemsApi } from '@/api/api';
import swipe from '@/components/swipe.vue';
import router from '@/router';
import { ref } from 'vue';
let status = ref(true)
let catitems = ref([])
catitemsApi().then(res => {
    catitems.value = res.data.message
    if (res.data.message.length > 0) {
        status.value = false
    }
})
const onSearch = () => {
    router.push('/search')
}
</script>

<style>
.pbl {
    column-count: 2;
    column-gap: 5px;

    div {
        display: inline-block;
        margin-bottom: 30px;
    }
}
</style>